
$detail-card-height:200px;
$margin-top:-10px;
$padding-bottom:150px;

.page-order-detail{

    overflow-x: hidden;
    
    .wrapper{
        padding-bottom:$padding-bottom;
    }

    .card-center{
        @include detail-card();
        display: flex;
        justify-content: space-between;
        position: relative;
        top:-34px;

        .title{
            font-size: 32px;
            font-weight: 500;
            color: #666F83;
        }

        .desc{
            font-size: 28px;
            font-weight: 400;
            color: #111A34;
            margin-top:4px;
        }
        .right{
            font-size: 28px;
            font-weight: 400;
            color:var(--color-primary); 
            display: inline-flex;

            .iconfont{
                font-size: 36px;
                margin-top:6px;
                color:var(--color-primary);
            }
        }
    }
    .message-card{
        margin-top:$margin-top ;
    }
    .render-bottom{

        display: flex;
        justify-content: flex-end;

        .commonbutton{
            display: inline-flex; 
            border-radius:45px;
            margin-left:20px;
            flex-shrink: 0;
        }
    }
    .order-detail{

        box-shadow: 0px 3px 5px 0px #E2E4EA;
        background-color: #fff;
        margin-top:24px;

        &-title{
            height:100px;
            display: flex;
            align-items: center;
            padding-left:32px;

            .text{
                font-size: 30px;
                font-weight: 500;
                color: #666F83;
            }
        }

        &-content{
            .goodItem{
                padding-top:16px;
                padding-left:32px;
                padding-right: 32px;
            }
        }

        &-footer{
            margin-top:28px;
            padding-bottom: 24px;

            .item{
                padding:4px 32px;
                display: flex; 
                align-items: center;
                justify-content: space-between;

                .field{
                    color: #666F83;
                    font-size: 24px;
                    font-weight: 400;
                }

                .value{
                    color: #111A34;
                    font-size: 24px;
                    font-weight: 400;
                }

            }
        }
    }
    .card-bottom{
        margin-top:20px;
        @include detail-card2();
    }

    .notpay_desc{
        display: flex;

        .at-countdown__time-box{
            font-family: -apple-system-font,Helvetica Neue,sans-serif;
            color:white;
            font-weight: 300;
        }
    }

    .dada_cancel_desc{
        display: flex;
    }
}